.header
    width 100%
    padding 1rem 6% 
    z-index 9
    background var(--header-color)
    -webkit-backdrop-filter saturate(50%) blur(8px)
    backdrop-filter saturate(50%) blur(8px)
    transition-property opacity
    transition-timing-function cubic-bezier(.4,0,.2,1)
    transition-duration .15s
    position fixed

.header_container
    height 3.5rem
    display flex
    align-items center
    justify-content space-between

.header_title
    text-decoration none
    // color var(--font-color)
    color $theme-color-dark
    font-size 1.2rem
    font-weight 700
    &:hover, &:active
        opacity .6

.appearance
    display flex
    justify-content flex-end
    flex-grow 1
    width 50%
    padding-left .5rem

.switch
    border-radius 0.5rem;
    border 2px solid transparent
    background-color transparent
    padding 0.5rem
    transition all .2s ease
    &:hover, &:active
        border-color $theme-color

.mobile_list_btn
    display none


// 移动端适配
@media (max-width: 767px)
    .header
        // 移动模式下header常驻
        opacity 1 !important
    .mobile_list_btn
        position relative
        display block
        width 36px
        span
            position absolute
            width 50%
            height 2px
            left 0
            right 0
            margin auto
            background-color var(--font-color)
        .btn_top
            top 10px
        .btn_middle
            top 47%
            // margin-top -1px
        .btn_bottom
            bottom 10px
